<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="rtl">

<head>
<script language="javascript" src="/resources/js/jquery.js"></script>
<script src="/resources/js/jquery-ui-1.9.0.custom.min.js"></script>
<link type="text/css" href="/resources/css/jquery-ui-1.9.0.custom.css"
	rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>

/* Language Switcher (http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx)*/
* {
	margin: 0;
	padding: 0;
}

header {
	display: block;
	background: #777;
	height: 50px;
	position: relative;
	min-width: 600px;
}

header h1 {
	font: bold 24px Arial, Helvetica, sans-serif;
	color: #fff;
	position: absolute;
	left: 20px;
	top: 8px;
}

#country-select {
	position: absolute;
	top:  4px;
	right: 0px;
	width: 180px;
}

/* rought form styles for when JS is disabled */
#country-select form {
	width: 180px;
	padding: 0;
}

#country-select select,#country-select input {
	display: inline;
	padding: 0;
	margin: 0;
}

/* JS-created definition list */
.dropdown dd {
	position: relative;
}

.dropdown a {
	text-decoration: none;
	outline: 0;
	font: 12px Arial, Helvetica, sans-serif;
	display: block;
	width: 130px;
	overflow: hidden;
}

.dropdown dt a {
	background: #6C594A;
	border: 1px solid #625042;
	padding: 3px 10px 4px 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #fff;
}

.dropdown dt a.active {
	background: #6C594A;
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius-bottomleft: 0;
	-moz-border-radius-bottomright: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 1px dotted #676768;
	-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .5);
	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .5);
	box-shadow: 0 3px 7px rgba(0, 0, 0, .5);
	color: #fff;
}

.dropdown dd ul {
	background: #917661;
	border: 1px solid #625042;
	color: white;
	display: none;
	width: 150px;
	z-index: 999;
	padding: 2px 0 5px 0;
	list-style: none;
	border-top: none;
	margin: 0;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, .5);
	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, .5);
	box-shadow: 0 3px 7px rgba(0, 0, 0, .5);
}

.dropdown dd ul li a {
	padding: 2px 10px;
}

.dropdown dd ul li a span,.dropdown dt a span {
	float: left;
	width: 16px;
	height: 11px;
	margin: 2px 6px 0 0;
	background-image: url(/resources/images/flags.png);
	background-repeat: no-repeat;
	cursor: pointer;
}

.us a span {
	background-position: 0 0
}

.uk a span {
	background-position: -16px 0
}

.fr a span {
	background-position: -32px 0
}

.de a span {
	background-position: -48px 0
}

.nl a span {
	background-position: -64px 0
}

.iw a span {
	background-position: -112px 0
}

.dropdown dd ul li a em,.dropdown dt a em {
	font-style: normal;
	float: left;
	width: 100px;
	cursor: pointer;
}

.dropdown dd ul li a em {
	color: #f3ede8;
}

.dropdown dd ul li a:hover {
	background-color: rgba(255, 255, 255, .1);
}

.dropdown dd ul li a:hover em {
	color: #fff;
}
/* END Language Switcher */
</style>
<style>
	.ui-dialog { direction: ltr; }
</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
bla
<div id="country-select" class="country-select">
  <form action="javascript:void()">
    <select id="country-options" name="country-options">
      <option selected="selected" title="?lang=en" value="en">English</option>
      <option title="?lang=iw" value="iw">Hebrew</option>
    </select>
  </form>
</div>	

<script>

// --- language dropdown --- //

// turn select into dl
createDropDown();

var $dropTrigger = $(".dropdown dt a");
var $languageList = $(".dropdown dd ul");

// open and close list when button is clicked
$dropTrigger.toggle(function() {
	$languageList.slideDown(200);
	$dropTrigger.addClass("active");
}, function() {
	$languageList.slideUp(200);
	$(this).removeAttr("class");
});

// close list when anywhere else on the screen is clicked
$(document).bind('click', function(e) {
	var $clicked = $(e.target);
	if (! $clicked.parents().hasClass("dropdown"))
		$languageList.slideUp(200);
		$dropTrigger.removeAttr("class");
});

// when a language is clicked, make the selection and then hide the list
$(".dropdown dd ul li a").click(function() {
	var clickedValue = $(this).parent().attr("class");
	var clickedTitle = $(this).find("em").html();
	$("#target dt").removeClass().addClass(clickedValue);
	$("#target dt em").html(clickedTitle);
	$languageList.hide();
	$dropTrigger.removeAttr("class");
});

//actual function to transform select to definition list
function createDropDown(){
var $form = $("div#country-select form");
$form.hide();
var source = $("#country-options");
source.removeAttr("autocomplete");
var selected = source.find("option:selected");
var options = $("option", source);
$("#country-select").append('<dl id="target" class="dropdown"></dl>')
$("#target").append('<dt class="' + selected.val() + '"><a href="#"><span class="flag"></span><em>' + selected.text() + '</em></a></dt>')
$("#target").append('<dd><ul></ul></dd>')
options.each(function(){
	$("#target dd ul").append('<li class="' + $(this).val() + '"><a href="' + $(this).attr("title") + '"><span class="flag"></span><em>' + $(this).text() + '</em></a></li>');
	});
}

</script>
</body>
</html>